<template>
    <div style="height:100%;">

        <div v-transfer-dom>
            <loading :show="isLoading" text="加载中"></loading>
        </div>

        <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="55px">

            <!--头部-->
            <x-header slot="header"
                      style="width:100%;position:fixed;left:0;top:0;z-index:100;"
                      :title="title"
                      :left-options="leftOptions"
                      >
            </x-header>

            <!--内容区域-->
            <section class="main_content">

                <transition :name="viewTransition" :css="!!direction">
                    <router-view></router-view>
                </transition>

            </section>


            <!--底部Tabs导航-->
            <tabbar slot="bottom" class="Layout_TabBar" style="position: fixed">
                <tabbar-item>
                    <img slot="icon" src="../../assets/img/icon_nav_button.png">
                    <span slot="label">Wechat</span>
                </tabbar-item>
                <tabbar-item show-dot link="/WeChart/index">
                    <img slot="icon" src="../../assets/img/icon_nav_msg.png">
                    <span slot="label">Message</span>
                </tabbar-item>
                <tabbar-item selected link="/Demo/index">
                    <img slot="icon" src="../../assets/img/icon_nav_article.png">
                    <span slot="label">Explore</span>
                </tabbar-item>
                <tabbar-item badge="2">
                    <img slot="icon" src="../../assets/img/icon_nav_cell.png">
                    <span slot="label">News</span>
                </tabbar-item>
            </tabbar>

        </view-box>

    </div>
</template>

<script>
    import { Drawer, ViewBox, XHeader, Tabbar, TabbarItem, Scroller, Loading, TransferDomDirective as TransferDom } from 'vux'

    import { mapState, mapActions } from 'vuex'

    export default {
        name: "index",
        directives: {
            TransferDom
        },
        components: {
            Drawer,
            ViewBox,
            XHeader,
            Tabbar,
            TabbarItem,
            Scroller,
            Loading,
        },
        computed: {
            ...mapState({
                isLoading: state => state.isLoading,
                direction: state => state.direction
            }),
            title() {
                return this.$route.name
            },
            leftOptions() {
                return {
                    showBack: this.$route.path != '/',
                }
            },
            viewTransition () {
                if (!this.direction) return ''
                return 'vux-pop-' + (this.direction === 'forward' ? 'in' : 'out')
            }
        },
        created() {
        }
    }
</script>

<style lang="scss">
    @import "../../styles/index.scss";

    .main_content{
        color: red;
        p{
            color: blue;
        }
    }
    .Layout_TabBar{
        position: fixed;
        bottom: 0;
        color: red;
    }
</style>
